@import '@/styles/utils.scss';
@import '@/styles/colors.scss';

:global(.Header_hotword__text-enter) {
  transform: translateY(30px);
}
:global(.Header_hotword__text-enter-active) {
  transform: translateY(0);
  transition: transform 500ms ease-in;
}
:global(.Header_hotword__text-exit) {
  transform: translateY(0);
}
:global(.Header_hotword__text-exit-active) {
  transform: translateY(-30px);
  transition: transform 500ms ease-in;
}

.header {
  background-color: white;
  border-bottom: 1px solid $borderGrey;

  .cart__overlay {
    position: relative;
    width: px2rem(330);
    height: px2rem(328);
    border: 1px solid #b5a176;
    border-top: 2px solid #d7ccb6;
    background-color: #fff;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);

    .cart__content {
      padding: px2rem(14);
      height: px2rem(245);
      background-color: #fff;
      overflow-y: scroll;

      .cart__item {
        padding: 0 0 10px 15px;
      }
    }
    .cart__footer {
      height: px2rem(66);
      background-color: #f4f0ea;
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price {
        font-size: px2rem(14);
        line-height: px2rem(20);
        margin-left: px2rem(15);
        color: #be4141;
        display: flex;
        flex-direction: column;

        .price__title {
          color: #999;
        }
        .price__sum {
          margin-top: px2rem(2);
        }
      }
      .checkout {
        margin-right: px2rem(31);
        width: px2rem(110);
        height: px2rem(36);
        line-height: px2rem(36);
        color: #fff;
        border: 1px solid #b4a078;
        background-color: #b4a078;
        text-align: center;
        font-size: px2rem(12);
        cursor: pointer;
      }
    }
  }

  .content {
    background-color: #fff;
    z-index: 110;
    position: relative;
    height: px2rem(140);
    .logo {
      position: absolute;
      top: 24px;
      left: 0;

      .logo__img {
        display: inline-block;
        background-image: url('~@/assets/home/icon_x1.png');
        background-position: 0 -298px;
        width: 212px;
        height: 60px;
        margin-right: px2rem(6);
      }
    }

    .smlogo {
      display: none;
    }

    .cart {
      border: 1px solid $mainGold;
      border-radius: px2rem(40);
      color: $mainGold;
      float: right;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 134px;
      height: 38px;
      margin-left: px2rem(49);
      margin-top: px2rem(26);

      .cart__icon {
        margin-right: px2rem(5);
        background-image: url('~@/assets/home/icon_x1.png');
        background-position: 0 -148px;
        height: 18px;
        width: 18px;
      }

      .cart__title {
        font-size: px2rem(14);
        margin-right: px2rem(10);
      }

      .cart__num {
        font-size: px2rem(12);
        border-radius: 15px;
        background-color: #d4282d;
        padding: 0 5px;
        color: white;
      }
    }

    .user {
      display: none;
    }

    .search {
      position: relative;
      margin-top: px2rem(26);
      float: right;
      width: px2rem(532);
      display: flex;
      flex-direction: column;

      .search__main {
        display: flex;
        align-items: center;

        .search__wrap {
          border: 1px solid #cc9756;
          border-bottom-left-radius: px2rem(19);
          border-top-left-radius: px2rem(19);
          display: flex;
          align-items: center;

          .search__hide {
            display: none;
          }

          .search__prefix {
            background-image: url(~@/assets/home/icon_x1.png);
            background-position: 0 -518px;
            height: 14px;
            width: 14px;
            margin-left: px2rem(18);
          }

          .search__input {
            margin-left: px2rem(6);
            display: block;
            font-size: px2rem(14);
            line-height: px2rem(36);
            height: px2rem(36);
            width: px2rem(400);
            outline: 0;
            overflow: hidden;
            border: none;
          }
        }

        .search__btn {
          width: px2rem(90);
          height: px2rem(38);
          background-color: #cc9756;
          border-top-right-radius: px2rem(19);
          border-bottom-right-radius: px2rem(19);
          cursor: pointer;
          float: right;
          color: #fff;
          line-height: px2rem(38);
          text-align: center;
          font-size: px2rem(16);
        }
      }

      .hotword {
        margin-top: px2rem(8);
        margin-left: px2rem(12);
        width: px2rem(444);
        overflow: hidden;
        .hotword__list {
          list-style: none;
          display: flex;
          align-items: center;
          .hotword__item {
            font-size: px2rem(12);
            line-height: px2rem(12);
            margin-left: px2rem(10);

            &::after {
              content: '';
              display: inline-block;
              height: px2rem(12);
              border-right: 1px solid #999;
              vertical-align: middle;
              margin-left: px2rem(10);
            }

            &:last-child::after {
              display: none;
            }

            .hotword__link {
              color: $mainGold;
              font-size: px2rem(12);
            }
          }
        }
      }
    }

    .category {
      line-height: 1;
      font-weight: 700;
      position: absolute;
      bottom: 0;
      width: px2rem(960);
    }
  }
}

.header_fixed {
  border-bottom: 1px solid #e1e1e1;
  position: fixed !important;
  background-color: #fff;
  z-index: 110;
  width: 100%;
  height: 50px !important;
  top: 0;
  left: 0;

  .content {
    border-bottom: 1px solid #e1e1e1;
    box-sizing: border-box;
    height: 50px !important;
    .logo {
      display: none !important;
    }

    .smlogo {
      display: block !important;
      position: absolute;
      top: 12px;
      left: 5px;
      height: 30px;
      width: 126px;
      .smlogo__img {
        position: absolute;
        display: inline-block !important;
        background-image: url('~@/assets/home/icon_x1.png');
        background-position: 0 -438px;
        height: 30px;
        width: 126px;
      }
    }

    .cart {
      z-index: 100;
      position: relative;
      cursor: pointer;
      width: 34px;
      height: 32px;
      border: 0;
      margin-top: 10px;
      margin-right: 24px;
      margin-left: 27px;

      .cart__icon {
        display: inline-block;
        background-image: url('~@/assets/home/icon_x1.png');
        background-position: 0 -204px;
        height: 24px;
        width: 24px;
      }
      .cart__title {
        display: none !important;
      }

      .cart__num {
        position: absolute;
        top: 0;
        right: 0;
      }
    }

    .user {
      display: inline-block;
      float: right;
      z-index: 100;

      .user__icon {
        display: inline-block;
        background-image: url('~@/assets/home/icon_x1.png');
        background-position: 0 -786px;
        height: 22px;
        width: 20px;
      }
    }

    .search {
      z-index: 100;
      margin-top: 16px;
      margin-right: 33px;
      width: 20px;
      background-color: white;
      .search__main {
        .search__wrap {
          border: none;
          .search__hide {
            display: none !important;
          }
          .search__prefix {
            display: none !important;
          }
          .search__input {
            display: none !important;
          }
        }
        .search__btn {
          background-color: transparent;
          border: none;
          height: 20px;
          .search__icon {
            background-image: url('~@/assets/home/icon_x1.png');
            background-position: 0 -602px;
            height: 20px;
            width: 20px;
          }
          .search__text {
            display: none !important;
          }
        }
      }
      .hotword {
        display: none !important;
      }
    }
    .categoryBar {
      position: absolute;
      top: 11px;
      left: 136px;
      width: 838px;
    }
  }
}
